<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
   
    <style>
     section{
        width: 1535px;
        height: 700px;
        margin: auto;
     }
      
        /* 缩略图和原图宽 */
        .thumbnail{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: absolute;
            top: 330px;
        }
        .origin {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: absolute;
        }
 
        .origin {
            left: 910px; /* 原图在缩略图的右边 */
            top: 240px;
            overflow: hidden; /* 隐藏溢出内容 */
            display: none;
        }
 
        /* 放大镜框 */
        /* 这里按2.5倍放大，400px/160px=2.5 */
        .magnifier {
            width: 160px;
            height: 160px;
            background: rgba(254, 238, 167, .4); /* 半透明效果 */
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        body{
            position: relative;
        }
        .celan{
            height: 702px;
            width: 102px;
            font-size: 20px;
            color: #999999;
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            right: 0;
            top: 150px;
        }
        .celan figure{
            width: 102px;
            height: 110px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background-color: white;
        }
        .celan figure:hover{
            color: orange;
        }
        .celan figure:nth-child(6){
            margin-top: 30px;
            opacity: 0;
        }
        .celan figure .iconfont{
            font-size: 32px;
        }
        .Redmi{
            width: 1535px;
            height: 90px;
            margin: auto;
        }
        .Redmi .cent{
            width: 1535px;
            height: 90px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            position: fixed;
            z-index: 3;
            top: 0;
            
        }
        .Redmi .cent .left{
            width: 400px;
            height: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .Redmi .cent .left h2{
            font-size: 30px;
        }
        .Redmi .cent .left a{
            border-left: 1px solid #999999;

        }
        .Redmi .cent .left a span{
            color: #999999;
            padding-left: 20px;
            
        }
        .Redmi .cent .right{
            height: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .Redmi .cent .right a{
            display: flex;
            border-right: 1px solid #999999;
            padding-right: 20px;
        }
        .Redmi .cent .right a:nth-child(6){
            border-right: none;
        }
        .Redmi .cent .right a span{
           margin-left: 20px;
           text-align: center;
        }
        .Redmi .cent a:hover{
            color: orange;
        }
        .goumai {
            width: 1535px;
            height: 1000px;
            margin: auto;
        }
        .goumai section{
            width: 752px;
            margin: auto;
        }
        .goumai section .shoubiao{
            height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            border-bottom: 1px solid #999999;
        }
        .goumai section .shoubiao h2{
            font-size: 30px;
            font-weight: 600;
        }
        .goumai section .shoubiao p{
            color: #999999;
            line-height: 30px;
        }
        .goumai section .shoubiao span{
            color: orange;
        }
        .goumai section .shoubiao  h3{
            color: red;
            font-size: 22px;
        }
        .goumai section .dizhi{
            width: 750px;
            height: 128px;
            background-color: #fafafa;
            border:1px solid #b0b0b0;
            line-height: 128px;
            display: flex;
        }
        .goumai section .dizhi span{
            margin-left: 20px;
           
        }
        .goumai section .dizhi h3{
            padding-left: 20px;
            color: orange;
        }
        .goumai section .dizhi a{
            color: orange;
            margin-left: 20px;
        }
        .goumai section .color{
            padding-top: 30px;   
        }
        .goumai section .color h2{
            font-size: 24px;
            padding-bottom: 15px;
        }
        .goumai section .color a{
            display:inline-block;
            width: 338px;
            height: 50px;
            padding-left: 15px;
           padding-top: 15px;
        }
        .goumai section .color a button{
            width: 338px;
            height: 50px;
            border: 1px solid #999999;
            background-color: white;
        }
        .goumai section .color a:hover button{
            color: orange;
            border: 1px solid orange;
        }
        .goumai section .jiage{
            height: 186px;
            margin-top: 20px;
            background-color: #f9f9fa;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
        }
        /* .goumai section .jiage span{
            margin-top: 30px;
            padding-left: 20px;
        } */
        .goumai section .jiage div{
            width: 700px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .goumai section .jiage p{
            width: 700px;
            margin: auto;
            font-size: 30px;
            color: orange;
        }
        .goumai section .end{
            padding-top: 30px;
        }
        /* .goumai section .end a{
            width: 370px;
            height: 70px;
        
        } */
        .goumai section .end button{
            width: 370px;
            height: 70px;
            background-color: orange;
            color: white;
            font-size: 22px;
            border: none;
        }
        .goumai section .end button:hover{
            background-color: rgb(245, 106, 13);
        }
        .goumai section .end input{
            width: 170px;
            height: 70px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 70px;
            border: none;
            font-size: 22px;
        }
        .goumai section .end input:hover{
            background-color:black;
            color: white;
        }
        .goumai section .end p{
            padding-top: 30px;
            font-size: 18px;
            color:#b0b0b0
        }
      
    </style>
</head>
<body>
    <header>

    </header>

    <div class="Redmi">
        <div class="cent">
            <div class="left">
                <h2>Redmi 手表2</h2>
                <a href=""><span>Xiaomi Watch Color 2</span></a>
            </div>
            <div class="right">
                <a href=""><span>概述页</span></a>
                <a href=""><span>参数页</span></a>
                <a href=""><span>公交城市</span></a>
                <a href=""><span>F码通道</span></a>
                <a href=""><span>资讯客服</span></a>
                <a href=""><span>用户评价</span></a>
            </div>
        </div>
    </div>

    <section>
            <!-- “缩略图”窗口 -->
    <div class="thumbnail">
        <img src="img/33.webp" width="400">
        <!-- “放大镜”框 -->
        <div class="magnifier"></div>
    </div>
    <!-- “原图”窗口 -->
    <div class="origin">
        <img src="img/33.webp" style="position: absolute;" width="1000">
    </div>
    </section>

    <div class="goumai">
        <section>
            <div class="shoubiao">
                <h2>Redmi 手表 2</h2>
                 <p>1.6"AMOLED大屏 | 独立卫星定位 | 117种运动模式 | 12天长续航 | 血氧检测 | 24小时心率监测 | 多功能NFC | 31g轻量化设计 | 50米防水</p>
                 <span>小米自营</span>
                 <h3>399元</h3>
            </div>
            <div class="dizhi">
                <span class="iconfont icon-didian"></span>
                <span>北京</span>
                <span>北京市</span>
                <span>海淀区</span>
                <span>清河街道</span>
                <a href="">修改</a>
                <h3>有现货</h3>
            </div>
            <div class="color">
                <h2>选择颜色</h2>
                <a href=""><button>深空蓝</button></a>
                <a href=""><button>象牙白</button></a>
                <a href=""><button>雅典黑</button></a>
            </div>
            <div class="jiage">
               <div> <span>Redmi 手表 2  深蓝色</span>
                <h5>399元</h5></div>
                <p>总计：399元</p>
            </div>
            <div class="end">
                <a href="goshop.html"><button>加入购物车</button></a>
                <a href=""><input type="text" value="喜欢"></a>
                <p>小米自营 小米发货 7天无理由退货 运费说明 企业信息 7天价格保护</p>
            </div>
        </section>
    </div>
    
    <footer>

    </footer>

    

    <div class="celan">
        <figure>
            <span class="iconfont icon-shoujiapp"></span>
            <figcaption>手机APP</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-xiazai"></span>
            <figcaption>个人中心</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-shouhoufuwu"></span>
            <figcaption>售后服务</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-shouhoufuwu"></span>
            <figcaption>人工客服</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-gouwuchekong"></span>
            <figcaption>购物车</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-didian"></span>
            <figcaption>回顶部</figcaption>
        </figure>

    </div>

</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/ajaxFun.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");

  
    function getParams(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = decodeURI(window.location.search).substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

   
    // let id = GetQueryValue("goodsId");
    $.ajax({
        url: "./goodsAndShoppingCart/getGoodsInfo.php",
        type: "get",
        data: {
            goodsId:getParams("goodsId")
        },
        success: function(resText) {
            let goodsInfor = JSON.parse(resText);
            $(".thumbnail").css({ backgroundImage: `url(${data.goodsImg})` })
            $(".origin").css({ backgroundImage: `url(${data.goodsImg})` })
        }
    });

//     function GetQueryValue(queryName) {
//     var query = decodeURI(window.location.search.substring(1));
//     var vars = query.split("&");
//     for (var i = 0; i < vars.length; i++) {
//         var pair = vars[i].split("=");
//         if (pair[0] == queryName) { return pair[1]; }
//     }
//     return null;
// }



    $(window).scroll(function(){
        let H = $(window).scrollTop();
        if(H >= 400){
            $("div[class=celan]").css({
                top:100
            });
            $(".celan figure:last").css({
                opacity: "1"
            }).click(function(){
                $(window).scrollTop(0);
            });
        }else{
            $("div[class=celan]").css({
                top:150
            });
            $(".celan figure:last").css({
                opacity: "0"
            });
        }
    });
    $(window).scroll(function(){
        let h = $(window).scrollTop();
        if(h>=175){
            $(".Redmi").css({
                display:"block"
            });
        }else{
            $(".Redmi").css({
                display:"none"
            });
        }
    });

      // 当鼠标进入“缩略图”窗口时，显示“原图”窗口和“放大镜”框
      $('.thumbnail').mouseover(function (e) {
            $('.origin').css('display', 'block');
            $('.magnifier').css('display', 'block');
        })
      
        $('.thumbnail').mousemove(function (e) {
           
          
            var pageX = e.pageX;
            var pageY = e.pageY;
     
            var offsetX = $('.thumbnail').offset().left;
            var offsetY = $('.thumbnail').offset().top;
           
            var relativeX = pageX - offsetX;
            var relativeY = pageY - offsetY;
        
            var magOffsetX = $('.magnifier').width() / 2;
            var magOffsetY = $('.magnifier').height() / 2;
            $('.magnifier').css({ left: relativeX - magOffsetX + 'px',
                top: relativeY - magOffsetY + 'px' });
           
            var magX = $('.magnifier').position().left;
            var magY = $('.magnifier').position().top;

           
            var maxMagX = $('.thumbnail').width() - $('.magnifier').width()
            var maxMagY = $('.thumbnail').height() - $('.magnifier').height()
          
            if (magX <= 0) {
                 $('.magnifier').css('left', '0px');
                 }
           
            if (magX >= maxMagX) { 
                $('.magnifier').css('left', maxMagX + 'px'); 
            }
            
            if (magY <= 0) { 
                $('.magnifier').css('top', '0px');
             }
        
            if (magY >= maxMagY) { 
                $('.magnifier').css('top', maxMagY + 'px'); 
            }

            var originX = magX * 2.5;
            var originY = magY * 2.5;
            $('.origin img').css({ 
                left: -originX + 'px',
                 top: -originY + 'px'
                });
        })
    
        $('.thumbnail').mouseout(function () {
            $('.origin').css(
                'display', 
                'none'
                );
            $('.magnifier').css(
                'display',
                 'none'
                 );
        })
</script>
<!-- <script>
    $("header").load("header.html");
    $("footer").load("footer.html");

    (function($){
        $.fn.imageZoom = function(options){
            var defaults = {
                scaling:0.3
            };

            options = $.extend(defaults,options),
            native_width = 0,
            native_height = 0,
            current_width = 0,
            current_height = 0,
            $small = $(".small"),
            $large = $(".large");
            
            $(".magnify").mousemove(function(e){
                if(!native_width && !native_height){
                    var image_object = new Image();
                    image_object.src = $small.attr('src');

                    native_height = image_object.height;
                    native_width = image_object.width;

                    current_height = $small.height();
                    current_width = $small.width();

                }else{
                    var magnify_offset = $(this).offset(),

                    mx = e.pageX - magnify_offset.left,
                    my = e.pageY - magnify_offset.top;


                    if(mx<$(this).width()&&my<$(this).height()&&mx>0&&my>0){
                        $large.fadeIn(100);
                    }else{
                        $large.fadeOut(100);
                    }
                    if($large.is(":visible")){
                     
                    var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2 )* -1,
                    
                    var ry = Math.round(my / $small.height() * native_height - $large.height() / 2 )* -1,

                    bgp = rx + "px" + ry +"px",
                    px = mx - $large.width() / 2,
                    py = my - $large.height() / 2;

                    $large.css({
                        left: px,
                        top: py,
                        backgroundPosition: bgp
                    });

                    }
                }
            });

            $(".magnify").bind('DOMMouseScroll mousewheel onmousewheel',function(e){
                var image_object = new Image();
                image_object.src = $large.attr('src');


                e = window.event || e;
                var delta = Math.max(-1,Math.min(1,(e.wheeIDelta || -e.detail)));

                native_height += (native_height*defaults.scaling *delta);

                native_width += (native_width * defaults.scaling*delta);

                if(native_height < current_height){
                    native_height = current_width;
                }

                if(native_width < current_width){
                    native_width = current_width;
                }

                var magnify_offset = $(this).offset(),
                mx = e.pageX - magnify_offset.left,
                my = e.pageY - magnify_offset.top;

                $large.css('background-size',native_width + "px" + native_height +"px");

                var rx = Math.round(mx /$small.width()*native_width - $large.width()/2)* -1,
                ry = Math.round(my /$small.height()*native_height - $large.height()/2)* -1,

                bgp = rx + "px" + ry + "px",
                px = mx - $large.width()/2,
                py = my - $large.height()/2;

                $large.css({
                    left:px,
                    top:py,
                    backgroundPosition:bgp

                });

            });
        };
    })(jQuery);
</script> -->